<template>
	<view class="">
		<u-toast ref="uToast" />
		<u-navbar :is-back="true" title="校园相册" back-icon-color='#333333' height="50" :border-bottom="false">
			<view class="" style="margin-left: 600rpx; display: flex;align-content: center;"
				@click="$toLink('../upload_photos/upload_photos',{})">
				<image src="../../static/tupian100.png" mode="widthFix" style="width: 35rpx;"></image>
			</view>
		</u-navbar>
		<view class="container">
			<view class="box">
			</view>
			<u-tabs-swiper active-color="#2F96FE" bar-width='80' ref="tabs" :list="list" :current="current"
				@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height:100%;width: 100%;">
						<view class="details" v-for="(item,index) in gallery_list" :key="index">
							<view class="">
								<text>{{item.main_title}}</text>
								<text>{{item.startTime}}</text>
							</view>
							<view class="photoList">
								<image :src="i.img" mode="widthFix" v-for="(i,j) in item.picture_list" :key="j"></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view style="margin-top: 30rpx;" class="out">
							<view class="one">
								<view v-for="(innerItem,innerIndex) in typeList" :key="innerIndex" class="two"
									@click="$toLink('../study/study',{id:innerItem.gallery_type_id})">
									<image :src="innerItem.img" mode="widthFix"></image>
									<text>{{innerItem.name}}</text>
									<text>{{innerItem.count}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				list: [{
						name: '照片'
					},
					{
						name: '分类'
					},
				],
				galleryList: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
				activeIndex: 0,
				dx: 0,
				type_list: [],
			}
		},
		onLoad() {
			this.getGalleryTypeList();
			this.getGalleryList();
		},
		computed: {
			typeList() {
				if (this.type_list) {
					return this.type_list;
				} else {
					return [];
				}
			},
			gallery_list() {
				if (this.galleryList) {
					this.galleryList.forEach(item => {
						this.$set(item, 'startTime', time.format(item.create_time));
					})
					return this.galleryList;
				} else {
					return [];
				}
			}
		},
		methods: {
			changeIndex(e) {
				console.log(e.currentTarget.dataset.name);
				let index = e.currentTarget.dataset.name;
				this.activeIndex = index;
			},
			getGalleryTypeList() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/gallery/galleryTypeList',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.type_list = res.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			getGalleryList() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/gallery/galleryList',
					method: 'post',
					data: {
						gallery_type_id: 0,

					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							_this.galleryList = res.data.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			change(index) {
				this.swiperCurrent = index;

			},
		},
		onreachBottom() {

		}
	}
</script>

<style lang="scss">
	.container {
		height: calc(100vh - var(--window-top));
		// height: 400rpx;
		width: 100%;
		background: #EEEEEE;

		.swiper-box {
			flex: 1;
			height: 100%;
		}

		.swiper-item {
			height: 100%;
		}

		.details {
			width: 100%;
			background: #fff;

			view {
				&:nth-child(1) {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: flex-start;
					margin-top: 20rpx;

					text {
						&:nth-child(1) {
							font-size: 30rpx;
							text-indent: 1em;
							color: #333333;
							margin-top: 30rpx;
							width: 510rpx;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
							margin-top: 40rpx;
						}
					}
				}
			}

			.photoList {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				image {
					width: 213rpx;

					&:nth-child(1) {
						margin-left: 20rpx;
					}

					&:nth-child(n+1) {
						margin-left: 20rpx;
					}
				}
			}

		}

		.out {
			width: 100%;
			height: calc(100vh - var(--window-top));
			background: #fff;

			.one {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.two {
					height: 340rpx !important;
					width: 213rpx;
					overflow: hidden !important;
					position: relative;

					&:nth-child(1) {
						margin-left: 20rpx;
					}

					&:nth-child(n+1) {
						margin-left: 40rpx;
					}

					&:nth-child(n+3) {
						margin-left: 20rpx;
					}

					image {
						width: 213rpx;
						position: absolute;
						left: 0rpx;
						top: 26rpx;
						border-radius: 12rpx;
					}

					text {
						&:nth-child(2) {
							position: absolute;
							left: 0rpx;
							bottom: 50rpx;
							color: #434343;
							z-index: 10 !important;
							font-size: 30rpx;
						}

						&:nth-child(3) {
							position: absolute;
							left: 0rpx;
							color: #434343;
							z-index: 10 !important;
							font-size: 24rpx;
							bottom: 13rpx;
						}
					}
				}

			}
		}

	}
</style>
